/* eslint-disable prefer-const */
/*
 * @Description:  ts的复习与进阶
 * @Author: ZhangHan
 * @Date: 2025-09-04 16:58:00
 * @LastEditTime: 2025-09-04 17:39:28
 * @LastEditors: ZhangHan
 */

function MyTsReview() {
  const readonlyArray1: readonly number[] = [1, 2, 3];
  const readonlyArray2: ReadonlyArray<number> = [1, 2, 3];

  //元组
  let x: [string, number, boolean];
  x = ["hello", 10, true];

  //可选元组数组
  let y: [string, number?];
  y = ["hello", 10];
  y = ["hello"];

  //基础接口
  interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any; // 索引签名 允许多余的属性
  }

  const tom: Person = {
    id: 1,
    name: "Tom",
    age: 25,
    gender: "male",
  };

  //函数类型接口
  interface SearchFunc {
    (source: string, subString: string): boolean;
  }

  interface say {
    (text: string): void;
  }

  const mySearch: SearchFunc = (source: string, subString: string) => {
    return source.search(subString) !== -1;
  };

  const sayHello: say = (text: string) => {
    console.log(text);
  };

  //可索引类型接口
  interface StringArray {
    [index: number]: string;
  }

  /*
   举个例子，如果你有一个变量被声明为 StringArray 类型，
   那么你可以像数组一样通过数字索引来访问它的元素，
   每个元素的值都应该是字符串
  */
  let myArray: StringArray = ["hello", "world"];

  return (
    <>
      <div>ts的复习与进阶</div>
    </>
  );
}

export default MyTsReview;
